import { configureStore } from "@reduxjs/toolkit";
import apiService from "@service/index";
import credentialsReducer from '@store/slice/credentials'
import persistUserReducer from "@slice/user";
import persistCredentialsReducer from "@slice/credentials";
import { useSelector } from "react-redux";

configureStore({
  reducer: {
    credentialsReducer,
  }
});

// slice 切片 : 1/initialState  2/同步操作  3/异步操作 createAsyncThunk + 手动axios
// 国外：全局的API状态切片: 1/不用手动配置axios 2/ 内置：取消请求 缓存 等高级操作
const store = configureStore({
    devTools: process.env.NODE_ENV == "development", // 先下开启 线上不开启
    reducer: {
        [apiService.reducerPath]:apiService.reducer, // 全局API切片
        credentialsReducer: persistCredentialsReducer,// 认证登录状态
        userReducer: persistUserReducer, // 用户信息
    },
    middleware: (getDefaultMiddleware) => {
        // 加入全局API切片的中间件 开启内置：取消请求 缓存 等高级操作 
        return getDefaultMiddleware({ serializableCheck: false }).concat(apiService.middleware);
    },
    
}); 

export type AppDispatch = typeof store.dispatch;
//export const useTypedDispatch = () => useDispatch<AppDispatch>();

export type AppState = ReturnType<typeof store.getState>;
// export const useTypedSelector: TypedUseSelectorHook = useSelector;

export default store;
